<template>
    <div class="tableData">
        <el-table
            :data="tableData"
            stripe
            style="width: 100%"
            @selection-change="handleSelectionChange"
        >
            <el-table-column
                v-if="selectionObj"
                :type="selectionObj.type"
                :width="selectionObj.width || 50"
            ></el-table-column>
            <template v-for="item in headerData">
                <el-table-column
                    v-if="item.prop === 'state'"
                    :key="item.prop"
                    :sortable="item.sortable"
                    :prop="item.prop"
                    :label="item.label"
                    :width="item.width || 0"
                    :align="item.align"
                >
                    <template #default="scope">
                        <el-switch
                            v-model="scope.row.state "
                            @change="switchChange(scope.row)"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            :active-value="1"
                            :inactive-value="0"
                        ></el-switch>
                    </template>
                </el-table-column>
                <template v-else>
                    <el-table-column
                        :key="item.prop"
                        :sortable="item.sortable"
                        :prop="item.prop"
                        :label="item.label"
                        :width="item.width || 0"
                        :align="item.align"
                    >
                        <template v-if="item.children && item.children.length > 0">
                            <el-table-column
                                v-for="childItem in item.children"
                                :key="childItem.prop"
                                :sortable="childItem.sortable"
                                :prop="childItem.prop"
                                :label="childItem.label"
                                :width="childItem.width || 0"
                                :align="item.align"
                            >
                                <el-table-column
                                    v-for="childItem2 in childItem.children"
                                    :key="childItem2.prop"
                                    :sortable="childItem2.sortable"
                                    :prop="childItem2.prop"
                                    :label="childItem2.label"
                                    :width="childItem2.width || 0"
                                    :align="item.align"
                                ></el-table-column>
                            </el-table-column>
                        </template>
                    </el-table-column>
                </template>
            </template>
            <el-table-column
                :fixed="operatingObj.fixed || false"
                label="操作"
                :width="operatingObj.width || ''"
                :align="operatingObj.align"
            >
                <template slot-scope="scope">
                    <el-button
                        v-for="(item, index) in operatingObj.btnList"
                        :key="index"
                        @click="handleClick(item.eventName, scope.row)"
                        type="text"
                        size="small"
                        :disabled="item.isDisabled"
                    >{{item.text}}
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
                background
                :current-page="page"
                :page-size="pageSize"
                layout="prev, pager, next"
                :total="total"
                @current-change="updatePage"
            ></el-pagination>
        </div>
    </div>
</template>

<!-- 分页根据实际情况作出相应修改 -->

<script>
import {pageSize} from '@/config';

export default {
    name: 'tableData',
    props: {
        // 表头数据
        headerData: {
            type: Array,
            required: true,
        },
        // 表体数据
        tableData: {
            type: Array,
            required: true,
        },
        // 显示多选数据
        selectionObj: Object,
        // 操作按钮数据
        operatingObj: Object,
        // 分页
        page: {
            type: Number,
            default: 1,
        },
        total: {
            type: Number,
            default: 1,
        },
    },
    data() {
        return {
            pageSize
        };
    },
    methods: {
        handleClick(eventName, obj) {
            this.$emit(eventName, obj);
        },
        handleSelectionChange(selection) {
            this.$emit('selection-change', selection);
        },
        
        /**
         * 当表头存在'state'字段，即显示状态
         * @method switchChange 状态切换事件
         * @param row 当前行数据
         */
        switchChange(row) {
            this.$emit('switch-change', row);
        },
        updatePage(page) {
            this.$emit('update:page', page);
        },
    },
};
</script>

<style scoped lang="less">
.tableData{

}
</style>
